<template>
  <div class="flex flex-center" style="height: 100px">
    <q-btn color="brown" label="Menu with QInfiniteScroll">
      <q-menu
        anchor="bottom middle"
        self="top middle"
        :offset="[ 0, 8 ]"
        @show="scrollTarget = $refs.scrollTargetRef"
      >
        <q-item-label header>
          Notifications
        </q-item-label>
        <q-list ref="scrollTargetRef" class="scroll" style="max-height: 250px">
          <q-infinite-scroll @load="onLoadMenu" :offset="250" :scroll-target="scrollTarget">
            <q-item v-for="(item, index) in itemsMenu" :key="index">
              <q-item-section>
                {{ index + 1 }}. Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Rerum repellendus sit voluptate voluptas eveniet porro.
                Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
              </q-item-section>
            </q-item>

            <template v-slot:loading>
              <div class="text-center q-my-md">
                <q-spinner-dots color="primary" size="40px" />
              </div>
            </template>
          </q-infinite-scroll>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      scrollTarget: void 0,
      itemsMenu: [ {}, {}, {}, {}, {}, {}, {} ]
    }
  },

  methods: {
    onLoadMenu (index, done) {
      if (index > 1) {
        setTimeout(() => {
          if (this.itemsMenu) {
            this.itemsMenu.push({}, {}, {}, {}, {}, {}, {})
            done()
          }
        }, 2000)
      }
      else {
        setTimeout(() => {
          done()
        }, 200)
      }
    }
  }
}
</script>
